<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>

    /*
        弹性换行
        父盒子设置了flex属性后变成了弹性容器,当子盒子的所有宽度加起来大于父盒子的宽度时,会出现自动压缩.
        如果有8个子盒子,我想一行显示4个而不是进行压缩显示.需要用到flex-wrap

        主要看 flex-wrap 被注释前后的显示效果
    */

    .box {
        display: flex;
        flex-direction: row;
        /* 增加换行属性 默认是不换行的*/
        flex-wrap: wrap;

        width: 800px;
        height: 300px;
        margin: 0 auto;
        border: 1px dashed black;

    }


    .box div {
        width: 200px;
        height: 100px;
        background-color: pink;
    }


</style>

<body>
<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>
</body>

</html>